---
{
	"title": "Steps Form",
	"language": "en",
	"category": "Plugins",
	"categoryfile": "plugins",
	"description": "Automatically converts a form into steps.",
	"altLangPrefix": "stepsform",
	"dateModified": "2025-06-02"
}
---
<span class="wb-prettify all-pre hide"></span>

<section>
	<h2>Purpose</h2>
	<p>This component provides the ability to break a form into steps.</p>
</section>

<section>
	<h2>Use when</h2>
	<ul>
		<li>Web forms are long/contain lot of information.</li>
	</ul>
</section>

<section>
	<h2>Working example</h2>
	<ul>
		<li><a href="../../../demos/stepsform/stepsform-en.html">English example</a></li>
		<li><a hreflang="fr" href="../../../demos/stepsform/stepsform-fr.html">French example</a></li>
	</ul>
</section>

<section>
	<h2>Evaluation and report</h2>
	<ul>
		<li>Accessibility assessment
			<ul>
				<li><a href="../../../demos/stepsform/reports/a11y-2-en.html" hreflang="en">English report</a></li>
				<li><a href="../../../demos/stepsform/reports/a11y-2-fr.html" hreflang="fr">French report</a></li>
			</ul>
		</li>
	</ul>
</section>

<section>
	<h2>How to implement</h2>
	<ol>
		<li>Create a <code>&lt;div&gt;</code> element with class <code>wb-steps</code> (you can also add class <code>wb-frmvld</code> for validation).
			<pre><code>&lt;div class=&quot;wb-frmvld wb-steps&quot;&gt;&lt;/div&gt;</code></pre>
		</li>
		<li>Within previous the <code>&lt;div&gt;</code> element add a <code>&lt;form&gt;</code> element.
			<pre><code>&lt;form action="#" method="get" id="steps-example"&gt;&lt;/form&gt;</code></pre>
		</li>
		<li>Within previous the <code>&lt;form&gt;</code> element add your <code>&lt;fieldset&gt;</code> element which will need an <code>&lt;legend&gt;</code> and <code>&lt;div&gt;</code>.
			<small>These will become your steps</small>
			<pre><code>&lt;fieldset&gt;<br>&lt;legend&gt;Client Information&lt;/legend&gt;<br>&lt;div&gt;(Any content in the div will be hidden.)&lt;/div&gt;<br>&lt;/fieldset&gt;</code></pre>
		</li>
		<li>(Optional) Add the class <code>quiz</code> to the div with the class <code>wb-steps</code> to convert into a steps quiz format.
			<pre><code>&lt;div class=&quot;wb-frmvld wb-steps quiz&quot;&gt;&lt;/div&gt;</code></pre>
		</li>
	</ol>
</section>

<section>
	<h2 id="config">Configuration options</h2>
	There are no configuration options.
</section>

<section>
	<h2>Events</h2>
	<p>Document the public events that can be used by implementers or developers.</p>
	<table class="table">
		<thead>
			<tr>
				<th>Event</th>
				<th>Trigger</th>
				<th>What it does</th>
			</tr>
		</thead>
		<tbody>
			<tr>
				<td><code>wb-init.wb-steps</code></td>
				<td>Triggered manually (e.g., <code>$( ".wb-steps" ).trigger( "wb-init.wb-steps" );</code>).</td>
				<td>Used to manually initialize the steps form. <strong>Note:</strong> You'll need to initialize Form validation before initializing wb-steps (you can add the <code>wb-frmvld</code> to the a <code>&lt;div&gt;</code> then trigger that div).</td>
			</tr>
			<tr>
				<td><code>wb-ready.wb-steps</code> (v4.0.24+)</td>
				<td>Triggered automatically after steps form initializes.</td>
				<td>Used to identify the element where steps form has initialized (target of the event)
					<pre><code>$( document ).on( "wb-ready.wb-steps", ".wb-steps", function( event ) {});</code></pre>
					<pre><code>$( ".wb-steps" ).on( "wb-ready.wb-steps", function( event ) {});</code></pre>
				</td>
			</tr>
			<tr>
				<td><code>wb-ready.wb</code> (v4.0.24+)</td>
				<td>Triggered automatically when WET has finished loading and executing.</td>
				<td>Used to identify when all WET plugins and polyfills have finished loading and executing.
					<pre><code>$( document ).on( "wb-ready.wb", function( event ) {});</code></pre>
				</td>
			</tr>
		</tbody>
	</table>
</section>

<section>
	<h2>Source code</h2>
	<p><a href="https://github.com/wet-boew/wet-boew/tree/master/src/plugins/stepsform">Steps form source code on GitHub</a></p>
</section>
